<template>
    <h1>{{ title }}</h1>
    <p>{{ userStore.name }}</p>
    <p>年龄: {{ userStore.age }}</p>
    <button @click="userStore.setName('张三')">设置姓名为张三</button>
    <button @click="userStore.grow()">增长年龄</button>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref } from "vue";

const route = useRoute();
console.log("route", route);

const title = ref("useRoute");

if (route.meta && route.meta.title) {
    title.value = route.meta.title as string;
}

import { useUserStore } from "../../store/user.ts";

const userStore = useUserStore();

// 访问 state
console.log(userStore.name); // TS 会提示类型 string

// 调用 action
userStore.setName("李四");
userStore.grow();
</script>

<style scoped></style>
